import React, { ElementRef, FC, memo, useRef } from "react";
import { AlbumWrapper } from "@/views/discover/c-views/recommend/c-components/new-album/style";
import AreaHeaderV1 from "@/components/area-header-v1";
import { Carousel } from "antd";
import {useAppSelector} from "@/store";
import NewAlbumItem from "@/components/new-album-item";

interface IProps {
  children?: React.ReactNode;
}

const NewAlbum: FC<IProps> = () => {
  const bannerRef = useRef<ElementRef<typeof Carousel>>(null);
  const {newAlbum} = useAppSelector(state => ({
    newAlbum: state.recommend.newAlbum
  }))

  const handlePreClick = () => {
    bannerRef.current?.prev();
  };
  const handleNextClick = () => {
    bannerRef.current?.next();
  };

  return (
    <AlbumWrapper>
      <AreaHeaderV1
        title={"新碟上架"}
        moreLink={"/discover/album"}
      ></AreaHeaderV1>
      <div className="content">
        <button
          className="sprite_02 arrow arrow-left"
          onClick={handlePreClick}
        ></button>
        <div className="banner">
          <Carousel ref={bannerRef} dots={false} speed={2000}>
            {[0, 1].map((item) => {
              return (
                <div className="list" key={item}>
                  <div className="album-list">
                    {newAlbum.slice(item * 5, (item + 1) * 5).map((album) => {
                      return <NewAlbumItem key={album.id} itemData={album} />;
                    })}
                  </div>
                </div>
              );
            })}
          </Carousel>
        </div>
        <button
          className="sprite_02 arrow arrow-right"
          onClick={handleNextClick}
        ></button>
      </div>
    </AlbumWrapper>
  );
};
export default memo(NewAlbum);
